
.system {
    display: flex;
    width: 100%;
    height: 100%;
    .system-icon{
        display: flex;
        padding: 15px 0;
        align-items: center;
        gap: 10px;
        margin-left: var(--nav-left-space);
        .icon-size{
            width: var(--tiklab-size-26);
            height: var(--tiklab-size-26);
        }
        .icon-text{
            font-size: 22px;
        }
        .aside-text-size{
            font-size: 16px;
            font-weight: bolder;
            cursor: pointer;
        }
    }
    &-aside {
        height: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 220px;
        background-color: #f0f3fa;
        border-right: 1px solid #EBECF0;
        display: flex;
        flex-direction: column;
        &-tab-up{
            flex: 1;
        }
        &-sys{
            width: 100%;
            text-align: center;
            padding-top: 10px;
            height: 45px;
            border-top: 1px solid var(--tiklab-gray-200);
            cursor: pointer;
        }
        &-top{
            height: 100%;
            overflow: hidden;
            &:hover{
                overflow: auto;
            }
        }
        ul,li {
            list-style: none;
        }
        &-hidden {
            display: none;
        }
        &-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            line-height: 40px;
            padding: 0 20px 0 var(--tiklab-distance-20);
            cursor: pointer;
           &-space{
               gap: var(--nav-icone-text-space);
               display: flex;
           }
        }
        .system-aside-goHome{
            :hover{
                background: var(--tiklab-gray-400);
            }
            .system-aside-title-nav{
                display: flex;
                border-bottom: 1px solid #EBECF0;
                padding: 10px var(--nav-left-space);
                align-items: center;
                gap: var(--nav-icone-text-space);
                cursor: pointer;
                .system-aside-icon{
                    font-size: var(--nav-icone-open-size);
                }
                .system-aside-title-text{
                    font-size: 15px;
                    font-weight: bolder;
                }
            }
        }


        .system-aside-first:hover {
            background: var(--tiklab-gray-400);
        }
        .system-aside-second:hover{
            background: var(--tiklab-gray-400);
        }

        &-li {
            line-height: 40px;
        }
        &-second-0{
            cursor: pointer;
            padding-left: 20px;
        }
        &-second-1{
            cursor: pointer;
            padding-left: 45px;
        }
        &-ul {
            padding: 0;
        }
        &-select {
            background: var(--tiklab-gray-400);
            border-left: 3px solid var(--tiklab-blue);
        }
    }
    .system-content{
        flex: 1;
        height: 100%;
        overflow: auto;
    }
    .sys-content-icon{
        font-size: 18px;
    }

    .nav-style{
        display: flex;
        align-items: center;
        padding-right: 20px;
        .nav-style-title{
            flex: 1;
        }
    }
}
